<template>
	<!-- 机构列表 -->
	<view>
		<view class='mech_item' v-for="(item,index) in mechs" :key="index" @click="nav_mech(item,index)">
			<image class='logo' :src="item.logoImg" mode="aspectFill"></image>
			<view class='mech_desc'>
				<view class='mech_name'>
					<view class='name_box'><scroll-view class='name' scroll-x="true" scroll-with-animation="true" show-scrollbar="false">{{item.name}}</scroll-view></view>
					<view class='space' v-if="item.distance||item.distance==0">距离您 {{item.space}} {{item.distance>1000?'km':'m'}}</view>
				</view>
				<view class='point_box'>
					<scroll-view class='point' scroll-x="true" scroll-with-animation="true" show-scrollbar="false">教育范围: {{item.categoryNames}}</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>
	
<script>
	export default{
		props: {
		    mechs: {
		        type: Array
			},
			status: {
				type: Number
			}
		},
		methods:{
			// status  1-普通  2-绑定  3-屏蔽  4-收藏
			nav_mech(item,index){
				if(this.$props.status==3){
					this.$emit("hideCompany",index);
					return false;
				}
				uni.navigateTo({
					url: `../../pages/mechDetail/mechDetail?id=${item.id}&type=`+this.$props.status
				})
			}
		}
	}
</script>

<style lang='scss'>
	.mech_item{
		padding: 32rpx;
		background: #fff;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		.logo{
			width: 92rpx;
			height: 92rpx;
			border: 2rpx solid rgba(144,144,144,0.11);
			border-radius: 8rpx;
			margin-right: 16rpx;
		}
		.mech_desc{
			flex: 1;
			width: 0;
			.mech_name{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 8rpx;
				.name_box{
					flex: 1;
					margin-right: 16rpx;
					height: 50rpx;
					overflow: hidden;
					.name{
						height: 64rpx;
						font-size: 36rpx;
						font-weight: 600;
						line-height: 50rpx;
						color: #3F4A58;
						overflow: hidden;
						white-space: nowrap;
					}
				}
				.space{
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: rgba(146,155,167,0.5);
				}
			}
			.point_box{
				height: 34rpx;
				overflow: hidden;
				.point{
					text-align: left;
					height: 46rpx;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: #929BA7;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}
</style>
